<template>
  <h2>添加电子汇劵信息</h2>
  <table class="table-bordered" border="1">
    <tr>
      <td>电子汇劵名称:</td>
      <td>
        <input type="text" v-model="bill.bill_Name" />
      </td>
    </tr>
    <tr>
      <td>电子汇劵颜色:</td>
      <td>
        <input type="text" v-model="bill.bill_Color" />
      </td>
    </tr>
    <tr>
      <td>电子汇劵库存量:</td>
      <td>
        <input type="text" v-model="bill.bill_Num" />
      </td>
    </tr>
    <tr>
      <td>每人限领:</td>
      <td>
        <input type="text" v-model="bill.bill_Use" />
      </td>
    </tr>
    <tr>
      <td>开始日期:</td>
      <td>
        <input type="date" v-model="bill.bill_StartTime" />
      </td>
    </tr>
    <tr>
      <td>结束日期:</td>
      <td>
        <input type="date" v-model="bill.bill_EndTime" />
      </td>
    </tr>
    <tr>
      <td>客服电话:</td>
      <td>
        <input type="text" v-model="bill.bill_Phone" />
      </td>
    </tr>
    <tr>
      <td>电子汇劵类型:</td>
      <td>
        <select v-model="bill.bill_Type">
          <option :value="-1">请选择</option>
          <option :value="0">代金券</option>
          <option :value="1">折扣劵</option>
          <option :value="2">兑换券</option>
        </select>
      </td>
    </tr>
    <tr v-show="bill.bill_Type == 2">
      <td>使用须知(兑换券):</td>
      <td>
        <textarea cols="20" rows="5" v-model="bill.bill_Info"></textarea>
      </td>
    </tr>
    <tr v-show="bill.bill_Type == 1">
      <td>折扣:</td>
      <td>
        <input type="text" v-model="bill.bill_Discount" />
      </td>
    </tr>
    <tr v-show="bill.bill_Type == 1">
      <td>适用业务:</td>
      <td>
        <input type="text" v-model="bill.bill_Business" />
      </td>
    </tr>
    <tr v-show="bill.bill_Type == 0">
      <td>代金金额:</td>
      <td>
        <input type="text" v-model="bill.bill_Money" />
      </td>
    </tr>
    <tr>
      <td>所属门店:</td>
      <td>
        <select v-model="bill.shop_Id">
          <option :value="0">请选择</option>
          <option v-for="item in shop" :value=" item.shop_Id"> {{ item.shop_Name }}</option>
        </select>
      </td>
    </tr>

    <tr>
      <td colspan="2">
        <input type="button" value="添加电子汇劵" @click="AddBill()" />
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import axios from "axios";

// 创建电子汇劵响应式数据
const bill = ref({
  bill_Id: 0,
  bill_Name: "",
  bill_Color: "",
  bill_Num: 0,
  bill_Use: 0,
  bill_StartTime: "",
  bill_EndTime: "",
  bill_Phone: "",
  bill_Info: "",
  bill_Discount: 0,
  bill_Business: "",
  bill_Money: 0,
  bill_Type: 0,
  shop_Id: 0,
});


const AddBill = () => {
  if (bill.value.bill_Name == "") {
    alert('请输入电子汇劵名称')
    return;
  }

  if (bill.value.bill_Use < 1) {
    alert('每人限领必须大于0')
    return;
  }
  // 验证手机号

  if (!/^1[3456789]\d{9}$/.test(bill.value.bill_Phone)) { 
    alert('请输入正确的手机号')
    return;
  }

  axios.post('https://localhost:7071/api/ElectronicBil/AddBill', bill.value)
    .then(res => {
      if (res.data > 0) {
        alert('电子汇劵添加成功');
        location.href=('/ShowElectronicBillView')
      }
      else if (res.data == -1) {
        alert('电子汇劵名称已存在');
      }
      else {
        alert('电子汇劵添加失败');
    }
    })
    .catch(err => {
    console.log(err)
  })
}

// 创建门店信息响应式数据
const shop = ref([
  {
    shop_Id: 0,
    shop_Name: "",
  
  }
]);

// 生命周期
onMounted(() => {
  GetShop();
});

// 获取门店数据
const GetShop = () => {
  axios
    .get("https://localhost:7071/api/ElectronicBil/GetShopInfo")
    .then((res) => {
      shop.value = res.data;
    })
  
};
</script>

<style scoped>
</style>